<template>
  <div class="sendingDentalMolds">
    <SwitchCli :swit="fl"></SwitchCli>
    <div>
      <h3>上传口扫数据</h3>
      <div class="dentalMolds">
        <SwitchCli :swit="switc"></SwitchCli>
        <div class="dentalMoldsBox">
          <FaceFile>上颌</FaceFile>
        </div>
      </div>
    </div>
    <div class="freeSend">
      <h3>寄送牙模</h3>
      <div class="dentalMolds">
        <div>
          <ModelImg :bac-img="bacImgS.box1">
            <img src="../../assets/icons/svg/shunFeng.png" alt="" />
          </ModelImg>
        </div>
        <div>
          <ModelImg :bac-img="bacImgS.box2">
            <img src="../../assets/icons/svg/others.png" alt="" />
          </ModelImg>
        </div>
      </div>

    </div>
    <div class="freeSend">
      <h3>是否需要报告</h3>
      <div class="dentalMolds">
        <div>
          <ModelImg :bac-img="bacImgS.box3">
            <img src="../../assets/icons/svg/post.png" alt="" />
          </ModelImg>
        </div>
        <div>
          <ModelImg :bac-img="bacImgS.box4">
            <img src="../../assets/icons/svg/nonePost.png" alt="" />
          </ModelImg>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import SwitchCli from './children/SwitchCli';
import FaceFile from './children/FaceFile';
import ModelImg from './children/ModelImg';
export default {
  name: 'SendingDentalMolds',
  components: {
    FaceFile,
    SwitchCli,
    ModelImg
  },
  data() {
    return {
      fl: {
        switchVal: ['上传口扫数据', '寄送牙模'],
        wid: '186px'
      },
      switc: {
        switchVal: ['上颌', '下颌', '合成'],
        wid: '224px'
      },
      bacImgS: {
        box1: '免费邮寄',
        box2: '其他方式邮寄',
        box3: '需要报告',
        box4: '不需要报告'
      }
      // bacImg:['免费邮寄','其他方式邮寄','需要报告','不需要报告']
    };
  },
  methods: {
    changeTrue() {
      this.fl.flo = true;
      this.fl.floVal = '上传口扫数据';
    },
    changeFalse() {
      this.fl.flo = false;
      this.fl.floVal = '寄送牙模';
    }
  }
};
</script>

<style scoped>
.sendingDentalMolds{
  padding: 11px 30px 70px;
}
.sendingDentalMolds>div:nth-of-type(2) .dentalMolds{
  border: 2px dashed #CCCCCC;
}
.dentalMolds{
  width: 100%;
  height: 278px;
  opacity: 1;
  border-radius: 20px;
}
.dentalMoldsBox{
  width: 300px;
  margin: 0px auto;
}
.dentalMolds>div:first-of-type{
  margin-right: 20px;
}
.freeSend>div{
  display: flex;
}
</style>
